import React, {createContext, useCallback, useContext, useState} from 'react';
import {View} from 'react-native';
import {BasicNavBar} from '../../kit/navigationBar';
import Section from './Section';
import LogoutBottom from './LogoutBottom';

type State = {
  test: string;
};

type Value = {
  state: State;
  set: () => void;
};

const SettingContext = createContext<Value | undefined>(undefined);

function SettingScreen(): JSX.Element {
  const [state, setState] = useState<State>({test: '内容1'});

  const set = useCallback(() => {
    const { test } = state;
    const lastNums = test.match(/\d$/g);
    let num = 0;
    if(lastNums?.length) {
        num = +lastNums[0];
        num++;
    }
    setState({test: '内容' + num});
  }, [state]);


  return (
    <SettingContext.Provider value={{state, set}}>
      <View>
        <BasicNavBar title="设置" />
        <Section />
        <LogoutBottom/>
      </View>
    </SettingContext.Provider>
  );
}

export const useSetting = function () {
  const ctx = useContext(SettingContext);
  return ctx;
};

export default SettingScreen;
